<div class="table-content-area">
  <div class="table-search-area">
    <nz-input-group [nzPrefix]="prefixIconSearch">
      <input nz-input type="text" placeholder="Filter by name" [(ngModel)]="filter.name" (ngModelChange)="doSearch()" i18n-placeholder="@@common.filter-by-name">
    </nz-input-group>
    <ng-template #prefixIconSearch>
      <i nz-icon nzType="icons:icon-search"></i>
    </ng-template>
    <button nz-button nzType="primary" (click)="showPolicyDrawer()">
      <i nz-icon nzType="icons:icon-add"></i>
      <ng-container i18n="@@common.add">Add</ng-container>
    </button>
  </div>
  <div class="table-wrapper">
    <nz-table #table nzSize="small"
              nzShowSizeChanger
              [nzData]="policies.items"
              [nzFrontPagination]="false"
              [nzLoading]="isLoading"
              [nzTotal]="policies.totalCount"
              [(nzPageSize)]="filter.pageSize"
              (nzPageSizeChange)="doSearch()"
              [nzPageSizeOptions]="[10,20,30]"
              [(nzPageIndex)]="filter.pageIndex"
              (nzPageIndexChange)="doSearch()"
              >
      <thead>
      <tr>
        <th i18n="@@common.name">Name</th>
        <th i18n="@@common.type">Type</th>
        <th i18n="@@common.description">Description</th>
        <th i18n="@@common.rn">Resource name (RN)</th>
        <th i18n="@@common.actions">Actions</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of table.data">
        <td (click)="navigateToDetail(item.id)">{{ item.name }}</td>
        <td>
          <i *ngIf="item.type === 'SysManaged'" style="color: #28a17d;" nz-icon nzType="star" nzTheme="outline"></i>
          {{item.type | policyType}}
        </td>
        <td>{{ item.description }}</td>
        <td>
          <i (click)="copyText(resourceName(item))" class="copy-icon" nz-icon nzType="icons:icon-copy"></i>
          {{ resourceName(item) }}
        </td>
        <td>
          <a class="primary-link-btn" (click)="navigateToDetail(item.id)" i18n="@@common.details">Details</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a *ngIf="item.type !== 'SysManaged'" style="color: #717D8A" i18n-nz-popconfirm="@@common.remove-confirm"  nz-popconfirm="This operation cannot be reverted, are you sure to remove it?"
             nzPopconfirmPlacement="bottomRight"
             [nzPopconfirmOverlayStyle]="{minWidth: '240px'}"
             (nzOnConfirm)="delete(item)" [nzIcon]="iconTplIamUser">
            <ng-container i18n="@@common.remove">Remove</ng-container>
          </a>
        </td>
      </tr>
      </tbody>
    </nz-table>
    <ng-template #iconTplIamUser>
      <i nz-icon nzType="question-circle" nzTheme="fill" style="color: #FAAD14;"></i>
    </ng-template>
  </div>
</div>

<policy-drawer [visible]="policyDrawerVisible" (close)="policyDrawerClosed($event)"></policy-drawer>

